<template>
	<view class="container-root">
		<view class="entitle-container" v-for="(item, index) in boxData" :key="index">
			<view v-if="userType !== 1" class="entitle-item-layer">
				<view class='entitle-item-head'>
					<view class='entitle-item-key-value'>
						<view class='item-key'>智能卡号：</view>
						<view>{{item.stbno}}</view>				          
					</view>
					
					<view class='entitle-item-key-value'>
						<view class='item-key'>画质：</view>
						{{item.cardflag == '0'?"高清":"标清"}}
					</view>
				</view>
				<view class='entitle-item-head '>
					<view class='entitle-item-key-value'>
						<view class='entitle-item-key'>主/副机：</view>
						{{item.mothercardflag == '0'?"主机":"副机"}}
					</view>
					<view class='entitle-button' hover-class='entitle-button-hover'  hover-stay-time='50' @tap='onItemClick(index)'>授权刷新</view>    
				</view>
			</view>
			<view v-else class="entitle-item-layer">
				<view class='item-head '>
					<view class='item-key-value'>
						<view class='entitle-item-key'>智能卡号：</view>
						{{item}}
					</view>
					<view class='entitle-button' hover-class='entitle-button-hover' hover-stay-time='50' @tap='onItemClick(index)'>授权刷新</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
			mapState,
			mapMutations
	} from 'vuex'
	import apis from '@/api.js'
	import httpRequest from '@/utils/utilHttp.js'
	
	export default {
		data() {
			return {
				userType:'0',
				boxData:null,
			}
		},
		computed:{
			...mapState(['token', 'userInfo']),
		},
		onLoad(){
			uni.setNavigationBarTitle({
				title:"刷新授权",
			})
			let self = this;
			self.userType = self.userInfo.userType;
			self.boxData = self.userInfo.stbInfo;
			if(self.userType === '1')
			{
				//reqesthttps--------
				var paramm = {
					usercode: self.userInfo.userCode,
				}
				let options = {
					url:httpRequest.requestUrl.stbInfo_get,
					method:httpRequest.requestMethod.GET,
					datas:parmm
				}
				httpRequest.Request(options).then(res => {
					//console.log(res)
					var toastMessage;
					if (res.data.status === 200) {
						 self.boxData = res.data.content;
					}					
				})
			}
		},
		methods: {
			entitleFresh:function(terminalid, terminaltype){				
				let paramm = {
					'usercode': this.userInfo.userCode,
					'token': this.token,	
					'terminalid':terminalid,
					'terminaltype':terminaltype
				};
				let options = {
					url:httpRequest.requestUrl.authRefresh_get,
					method:httpRequest.requestMethod.GET,
					datas:paramm
				};
				httpRequest.Request(options).then(res => {
					//console.log(res)
					var toastMessage;
					if (res.data.status === 200) {
						 toastMessage = '授权信息已刷新！'
					}
					else{
						toastMessage = '授权请求已发送，请勿重复刷新！'
					}
					uni.showToast({
						title: toastMessage,
						icon: "none"
					})
				})
			},
			onItemClick(index){
				let self = this;
				var boxInfo = self.boxData[index];
				
				var terminalid = null;
				var terminaltype = '';

				if(self.userType === '1')
				{
					terminalid = boxInfo;
					terminaltype = '1';
				}
				else{
					terminalid = boxInfo.stbno;
					if("2" === boxInfo.type)
					{
						terminaltype = '0';
					}
					else{
						terminaltype = '1';
					}
				}
				
				//console.log(boxInfo, index,terminaltype, terminalid);
				self.entitleFresh(terminalid, terminaltype);
			}
		}
	}
</script>

<style>
	page{
		background-color: #F6F6F6;
		font-size: 32rpx;
	}
	.entitl-container{
		width: 100%;
		height: 100%;
	}
	.entitle-item-layer{
		width: calc(100% - 40rpx);
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 20rpx 20rpx 20rpx 20rpx;
		margin-top: 20rpx;		
		background-color: white;
	}
	.entitle-item-head{
		display: flex;
		
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.entitle-item-key-value{
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.entitle-item-key {
	  color: #666;
	}
	.entitle-button {
		background-color: #00b9ef;
		color: white;
		border-radius: 10rpx;
		padding: 10rpx 20rpx 10rpx 20rpx;
	}
	.entitle-button-hover {
	  background-color: rgba(0,185,239,0.7);
	} 
</style>
